<script setup lang="ts">
import { ref, defineEmits, watch, onMounted, PropType } from 'vue';
import { useBooleanStore } from '@/store';
import { getCarLocation } from '@/api/les';
import { LocationTypeOption } from '@/api/les/types';

const props = defineProps({
  locationTypeOptions: Array as PropType<LocationTypeOption[]>,
  areaOptions: Array as PropType<LocationTypeOption[]>,
});

const emit = defineEmits(['updateArray']);
const booleanStore = useBooleanStore();
// 表单查询数据
const type = ref<number[]>([]);
const code = ref<string>('');
const occupiedCode = ref<string>('');
const port = ref<string>('');
const area = ref<string>('');
// const showImage = ref<boolean>(false);
const imageSrc = ref<string>('');

const pageSize = ref<number>(10);
const pageNumber = ref<number>(1);



// 表格数据
async function handleSearch() {
  const newData = await getCarLocation({
    code: code.value,
    type: type.value,
    occupiedCode: occupiedCode.value,
    port: port.value,
    area: area.value,
    current: pageNumber.value,
    size: pageSize.value,
  });
  emit('updateArray', newData);
}
// 重置
function reset() {
  type.value = [];
  code.value = '';
  occupiedCode.value = '';
  port.value = '';
  area.value = '';
  handleSearch();
}
onMounted(async () => {
  handleSearch();
  try {
    // 动态导入图片路径
    const module = await import('@/assets/images/101布局图.pdf');
    imageSrc.value = module.default;
  } catch (error) {
    console.error('图片加载失败:', error);
  }
});

// const onImageClick = () => {
//   showImage.value = true;
// };

const onImageClick = () => {
  // showImage.value = true;
  if (imageSrc.value) {
    window.open(imageSrc.value, '_blank');
  }
};

// 监听分页
watch([() => booleanStore.pageNum, () => booleanStore.pageSize], () => {
  if (booleanStore.num5 === 100) {
    pageNumber.value = booleanStore.pageNum;
    pageSize.value = booleanStore.pageSize;
    handleSearch();
  }
});
watch(
  () => booleanStore.update,
  () => {
    if (booleanStore.num6 === 102) handleSearch();
  }
);
</script>

<template>
  <a-row :gutter="{ md: 8, lg: 24, xl: 32 }">
    <a-col :span="6">
      <a-select
        v-model="type"
        placeholder="库位类型"
        size="large"
        multiple
        @press-enter="handleSearch"
      >
        <a-option
          v-for="item of props.locationTypeOptions"
          :key="item.value"
          :value="item.value"
          >{{ item.label }}
        </a-option>
      </a-select>
    </a-col>
    <a-col :span="6">
      <div>
        <a-input v-model="code" placeholder="库位编码" size="large" />
      </div>
    </a-col>
    <a-col :span="6">
      <div>
        <a-input v-model="occupiedCode" placeholder="占用编码" size="large" />
      </div>
    </a-col>
    <a-col :span="6">
      <div>
        <a-input v-model="port" placeholder="站点地址" size="large" />
      </div>
    </a-col>
  </a-row>
  <a-row :gutter="{ md: 8, lg: 24, xl: 32 }" style="margin-top: 10px">
    <a-col :span="6">
      <a-select
        v-model="area"
        placeholder="库区"
        size="large"
        @press-enter="handleSearch"
      >
        <a-option
          v-for="item of props.areaOptions"
          :key="item.value"
          :value="item.value"
          >{{ item.label }}
        </a-option>
      </a-select>
    </a-col>
    <a-col :span="12">
      <div>
        <a-button type="primary" size="large" @click="handleSearch"
          >查询</a-button
        >
        <a-button class="btn-reset" size="large" @click="reset">重置</a-button>
        <a-button
          type="primary"
          class="btn-reset"
          size="large"
          @click="booleanStore.toggleBool(101)"
          >新增库位</a-button
        >
        <a-button
          type="primary"
          status="warning"
          class="btn-reset"
          size="large"
          @click="onImageClick"
          >库位分布图</a-button
        >
        <!-- <a-image-preview
          :src="imageSrc"
          v-model:visible="showImage"
        /> -->
      </div>
    </a-col>
  </a-row>
</template>

<style scoped>
.btn-group {
  float: right;
  margin-top: 15px;
}

.btn-reset {
  margin-left: 10px;
}
</style>
